import React,{Component} from 'react';
import { Slider, InputNumber  } from 'antd';


const limitDecimals = (value: string | number): string => {
    const reg = /^(\-)*(\d+)\.(\d).*$/;
    if(typeof value === 'string') {
        return !isNaN(Number(value)) ? value.replace(reg, '$2.$3') : ''
    } else if (typeof value === 'number') {
        return !isNaN(value) ? String(value).replace(reg, '$2.$3') : ''
    } else {
        return ''
    }
};
class Params extends Component{
    constructor(props){
        super(props);
        this.state = {
        }
    }
    render(){
        return(
            <>
                <div className="add_thing">
                    <div className="add_title">
                        <span>效果参数</span>
                        <img src={require('../page/main/visualSystem/img/cancel.jpg')} alt=""/>
                    </div>
                    <div>
                        <ul className="effect_list">
                            <li>
                                <p>吊绳</p>
                                <div>
                                    <div className="InputNumber">
                                    <span onClick={ ()=> this.Reduce(1)}>-</span>
                                    <InputNumber
                                        style={{ margin: '0 16px' }}
                                        value={this.props._this.state.diaosheng}
                                        onChange={(e)=> this.onChange(e,1)}
                                        formatter={limitDecimals}
                                        parser={limitDecimals}
                                    />
                                    <span onClick={ ()=> this.Add(1)}>+</span>
                                    </div>
                                    <div>
                                        <Slider
                                            min={0}
                                            max={2}
                                            onChange={(e)=> this.onChange(e,1)}
                                            value={typeof this.props._this.state.diaosheng === 'number' ? this.props._this.state.diaosheng : 0}
                                            step={0.1}
                                        />
                                    </div>
                                </div>
                            </li>
                            <li>
                                <p>抛泥速度</p>
                                <div>
                                    <div className="InputNumber">
                                    <span onClick={ ()=> this.Reduce(2)}>-</span>
                                    <InputNumber
                                        style={{ margin: '0 16px' }}
                                        value={this.props._this.state.paonisudu}
                                        onChange={(e)=> this.onChange(e,2)}
                                        formatter={limitDecimals}
                                        parser={limitDecimals}
                                    />
                                    <span onClick={ ()=> this.Add(2)}>+</span>
                                    </div>
                                    <div>
                                        <Slider
                                            min={0}
                                            max={2}
                                            onChange={(e)=> this.onChange(e,2)}
                                            value={typeof this.props._this.state.paonisudu === 'number' ? this.props._this.state.paonisudu : 0}
                                            step={0.1}
                                        />
                                    </div>
                                </div>
                            </li>
                            {/* <li>
                                <p>妮门开启速度</p>
                                <div>
                                    <div className="InputNumber">
                                    <span onClick={ ()=> this.Reduce(3)}>-</span>
                                    <InputNumber
                                        style={{ margin: '0 16px' }}
                                        value={this.props._this.state.nimenkaiqisudu}
                                        onChange={(e)=> this.onChange(e,3)}
                                        formatter={limitDecimals}
                                        parser={limitDecimals}
                                    />
                                    <span onClick={ ()=> this.Add(3)}>+</span>
                                    </div>
                                    <div>
                                        <Slider
                                            min={0}
                                            max={2}
                                            onChange={(e)=> this.onChange(e,3)}
                                            value={typeof this.props._this.state.nimenkaiqisudu === 'number' ? this.props._this.state.nimenkaiqisudu : 0}
                                            step={0.1}
                                        />
                                    </div>
                                </div>
                            </li> */}
                            <li>
                                <p>艏喷速度</p>
                                <div>
                                    <div className="InputNumber">
                                    <span onClick={ ()=> this.Reduce(4)}>-</span>
                                    <InputNumber
                                        style={{ margin: '0 16px' }}
                                        value={this.props._this.state.shoupensudu}
                                        onChange={(e)=> this.onChange(e,4)}
                                        formatter={limitDecimals}
                                        parser={limitDecimals}
                                    />
                                    <span onClick={ ()=> this.Add(4)}>+</span>
                                    </div>
                                    <div>
                                        <Slider
                                            min={0}
                                            max={2}
                                            onChange={(e)=> this.onChange(e,4)}
                                            value={typeof this.props._this.state.shoupensudu === 'number' ? this.props._this.state.shoupensudu : 0}
                                            step={0.1}
                                        />
                                    </div>
                                </div>
                            </li>
                            <li>
                                <p>冲仓速度</p>
                                <div>
                                    <div className="InputNumber">
                                        <span onClick={ ()=> this.Reduce(5)}>-</span>
                                        <InputNumber
                                            style={{ margin: '0 16px' }}
                                            value={this.props._this.state.chongcangsudu}
                                            onChange={(e)=> this.onChange(e,5)}
                                            formatter={limitDecimals}
                                        parser={limitDecimals}
                                        />
                                        <span onClick={ ()=> this.Add(5)}>+</span>
                                    </div>
                                    <div>
                                        <Slider
                                            min={0}
                                            max={2}
                                            onChange={(e)=> this.onChange(e,5)}
                                            value={typeof this.props._this.state.chongcangsudu === 'number' ? this.props._this.state.chongcangsudu : 0}
                                            step={0.1}
                                        />
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </>
        )                
    }
    onChange = (checked,i) => {
        if(i === 1){
                this.props._this.setState({
                    diaosheng:checked
                })     
            return
        }else if(i === 2){
                this.props._this.setState({
                    paonisudu:checked
                })
            return
        }else if(i === 3){
                this.props._this.setState({
                    nimenkaiqisudu:checked
                })
            return
        }else if(i === 4){
            this.props._this.setState({
                shoupensudu:checked
            })
            return
        }else if(i === 5){
                this.props._this.setState({
                    chongcangsudu:checked
                })
            return
        }
    };
    Add(id){
        if(id ===1){
            let val =  Number(this.props._this.state.diaosheng);
            if(val <2){
                this.props._this.setState({
                    diaosheng:val += 0.1
                })
            }
        }else if( id === 2 ){
            let val =  this.props._this.state.paonisudu;
            if(val <2){
                this.props._this.setState({
                    paonisudu:val += 0.1
                })
            }
        }else if( id === 3 ){
            let val =  this.props._this.state.nimenkaiqisudu;
            if(val <2){
                this.props._this.setState({
                    nimenkaiqisudu:val += 0.1
                })
            }
        }else if( id === 4 ){
            let val =  this.props._this.state.shoupensudu;
            if(val <2){
                this.props._this.setState({
                    shoupensudu:val += 0.1
                })
            }
        }else if( id === 5 ){
            let val =  this.props._this.state.chongcangsudu;
            if(val <2){
                this.props._this.setState({
                    chongcangsudu:val += 0.1
                })
            }
        }
    }
    Reduce(id){
        if(id ===1){
            let val =  this.props._this.state.diaosheng;
            if(val > 0.1){
                this.props._this.setState({
                    diaosheng:val -= 0.1
                })
            }
        }else if( id === 2 ){
            let val =  this.props._this.state.paonisudu;
            if(val > 0.1){
                this.props._this.setState({
                    paonisudu:val -= 0.1
                })
            }
        }else if( id === 3 ){
            let val =  this.props._this.state.nimenkaiqisudu;
            if(val > 0.1){
                this.props._this.setState({
                    nimenkaiqisudu:val -= 0.1
                })
            }
        }else if( id === 4 ){
            let val =  this.props._this.state.shoupensudu;
            if(val > 0.1){
                this.props._this.setState({
                    shoupensudu:val -= 0.1
                })
            }
        }else if( id === 5 ){
            let val =  this.props._this.state.chongcangsudu;
            if(val > 0.1){
                this.props._this.setState({
                    chongcangsudu:val -= 0.1
                })
            }
        }
    }
}
export default Params;